<template>
  <div class="user_right fl ml20">
    <el-tabs v-model="costactive" @tab-click="costClick">
      <el-tab-pane label="全部订单" name="all"></el-tab-pane>
      <el-tab-pane label="已开票" name="unconfirm"></el-tab-pane>
      <el-tab-pane label="已申请" name="stay"></el-tab-pane>
      <el-tab-pane label="未申请" name="inspection"></el-tab-pane>
    </el-tabs>
    <div class="query_top">
      <div>
        <el-input class="cipt288" v-model="orderid" placeholder="请输入要查询的订单号"></el-input>
      </div>
      <div>
        <el-date-picker class="cipt140" v-model="start" type="date" placeholder="起始时间"></el-date-picker>
        <div></div>
        <el-date-picker class="cipt140" v-model="end" type="date" placeholder="起始时间"></el-date-picker>
      </div>
      <div>
        <button>查询</button>
        <button @click="deriv_btn">导出</button>
        <button @click="to_apply_for_invoice = true">发票申请</button>
      </div>
    </div>
    <div class="query_body">
      <table>
        <colgroup>
          <col width="32" />
          <col width="215" />
          <col width="160" />
          <col width="120" />
          <col width="120" />
          <col width="140" />
          <col width="121" />
        </colgroup>
        <tbody>
          <tr class="query_body_top">
            <th>
              <input
                type="checkbox"
                name="vehicle"
                value="Bike"
                ref="check_all"
                @click="switchItem()"
              />
            </th>
            <th>订单编号</th>
            <th>收款日期</th>
            <th>费用类别</th>
            <th>费用类型</th>
            <th>总金额</th>
            <th>开票</th>
          </tr>
        </tbody>
        <tbody>
          <tr class="query_body_body" v-for="(item,index) in List" :key="index">
            <td>
              <input
                type="checkbox"
                class="check-item"
                name="vehicle"
                :value="index"
                :checked="item.ischeck"
                @click="isSelect(index)"
              />
            </td>
            <td>订单号 {{item.orderid}}</td>
            <td>{{item.date_receipt}}</td>
            <td>{{item.cost_classes}}</td>
            <td>{{item.cost_type}}</td>
            <td>￥{{item.total_amount}}</td>
            <td>未申请</td>
          </tr>
        </tbody>
      </table>
    </div>
    <el-dialog title="提示" :visible.sync="to_apply_for_invoice" width="30%" center>
      <div class="invoice_popup">
        <div>
          <p>申请单个订单开票时，只需要勾选单个订单，直接点击“确认开票”即可。</p>
          <p>申请多个订单开票时，可通过勾选多个订单或者通过选择订单时间段，来开具发票。</p>
        </div>
        <div>
          <span>选择时间段：</span>
          <div class="block">
            <el-date-picker v-model="value1" type="date" placeholder="起始时间"></el-date-picker>
          </div>
          <div class="solrt_"></div>
          <div class="block">
            <el-date-picker v-model="value1" type="date" placeholder="结束时间"></el-date-picker>
          </div>
        </div>
        <div onselectstart="return false;   " @click="to_apply_for_invoice = false">确认开票</div>
      </div>
    </el-dialog>
  </div>
</template>


<script>
export default {
  data() {
    return {
      orderid: "",
      start: "",
      end: "",
      List: [],
      to_apply_for_invoice: false,
      costactive: "all",
      value1: ""
    };
  },
  created() {
    const data = [
      {
        orderid: "4654614XJD6456",
        date_receipt: "2020-12-12 09:26:30",
        cost_classes: "软件服务费",
        cost_type: "卖方服务费",
        total_amount: 189.0
      },
      {
        orderid: "4654614XJD6456",
        date_receipt: "2020-12-12 09:26:30",
        cost_classes: "软件服务费",
        cost_type: "卖方服务费",
        total_amount: 189.0
      },
      {
        orderid: "4654614XJD6456",
        date_receipt: "2020-12-12 09:26:30",
        cost_classes: "软件服务费",
        cost_type: "卖方服务费",
        total_amount: 189.0
      },
      {
        orderid: "4654614XJD6456",
        date_receipt: "2020-12-12 09:26:30",
        cost_classes: "软件服务费",
        cost_type: "卖方服务费",
        total_amount: 189.0
      },
      {
        orderid: "4654614XJD6456",
        date_receipt: "2020-12-12 09:26:30",
        cost_classes: "软件服务费",
        cost_type: "卖方服务费",
        total_amount: 189.0
      },
      {
        orderid: "4654614XJD6456",
        date_receipt: "2020-12-12 09:26:30",
        cost_classes: "软件服务费",
        cost_type: "卖方服务费",
        total_amount: 189.0
      },
      {
        orderid: "4654614XJD6456",
        date_receipt: "2020-12-12 09:26:30",
        cost_classes: "软件服务费",
        cost_type: "卖方服务费",
        total_amount: 189.0
      },
      {
        orderid: "4654614XJD6456",
        date_receipt: "2020-12-12 09:26:30",
        cost_classes: "软件服务费",
        cost_type: "卖方服务费",
        total_amount: 189.0
      },
      {
        orderid: "4654614XJD6456",
        date_receipt: "2020-12-12 09:26:30",
        cost_classes: "软件服务费",
        cost_type: "卖方服务费",
        total_amount: 189.0
      },
      {
        orderid: "4654614XJD6456",
        date_receipt: "2020-12-12 09:26:30",
        cost_classes: "软件服务费",
        cost_type: "卖方服务费",
        total_amount: 189.0
      }
    ];
    data.forEach(item => {
      item.ischeck = false;
    });
    this.List = data;
  },
  methods: {
    // 获取选中
    isSelect(index) {
      this.List[index].ischeck = !this.List[index].ischeck;
    },
    // 全选
    switchItem() {
      let isallc = this.$refs.check_all.checked;
      this.List.forEach(item => {
        if (isallc) {
          item.ischeck = true;
        } else {
          item.ischeck = false;
        }
      });
    },
    // 是否导出excel
    deriv_btn() {
      this.$confirm("此操作将导出EXCEL, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.tableToExcel();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消导出"
          });
        });
    },

    // 导出Excel
    tableToExcel() {
      let checkList = this.List.filter(item => item.ischeck === true);
      if (checkList.length === 0) {
        this.$message({
          type: "info",
          message: "请先选择"
        });
      } else {
        // 标题
        let head = `<tr><td>订单编号</td><td>收款日期</td><td>费用类别</td><td>费用类型</td><td>总金额</td></tr>`;
        let tbody = ""; //内容
        for (let i in checkList) {
          tbody += `<tr>
                    <td>${checkList[i].orderid}</td>
                    <td>${checkList[i].date_receipt}</td>
                    <td>${checkList[i].cost_classes}</td>
                    <td>${checkList[i].cost_type}</td>
                    <td>${checkList[i].total_amount}</td>
            </tr>`;
        }
        let str = head + tbody; //链接头部和尾部
        //Worksheet名
        let worksheet = "Sheet1";
        let uri = "data:application/vnd.ms-excel;base64,";

        //下载的表格模板数据
        let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office" 
                  xmlns:x="urn:schemas-microsoft-com:office:excel" 
                  xmlns="http://www.w3.org/TR/REC-html40">
                  <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
                    <x:Name>${worksheet}</x:Name>
                    <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
                    </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
                    </head><body><table>${str}</table></body></html>`;
        //下载模板
        window.location.href = uri + this.base64(template);
        this.$message({
          type: "success",
          message: "导出成功!"
        });
      }
    },
    base64(s) {
      return window.btoa(unescape(encodeURIComponent(s)));
    },

    //Tab切换
    costClick(tab) {
      console.log(tab);
    }
  }
};
</script>


<style lang="scss" scoped>
.user_right {
  width: 950px;
  background: #fff;
  padding-bottom: 30px;
  /deep/.el-tabs {
    padding-bottom: 40px;
    padding: 30px;
    .el-tabs__header {
      height: 40px;
      border-bottom: 1px solid #e6e6e6;
      .el-tabs__item {
        padding: 0 20px;
        height: 40px;
        box-sizing: border-box;
        line-height: 40px;
        display: inline-block;
        list-style: none;
        font-weight: 500;
        color: #303133;
        position: relative;
        font-size: 18px;
        user-select: none;
      }
      .el-tabs__item:hover {
        color: #4448f8;
      }
      .el-tabs__active-bar {
        height: 3px;
        background-color: #4448f8;
      }
    }
    .el-tabs__content {
      color: #333;
      .ptb20 {
        padding-bottom: 20px;
      }
      .mt40 {
        margin-top: 40px;
      }
      .center {
        text-align: center;
        .ico_fail {
          background: url("~@/assets/img/fail_ico.png") no-repeat 0 0;
          width: 60px;
          height: 63px;
          display: inline-block;
        }
        p {
          color: #999;
          margin-top: 20px;
          font-size: 14px;
        }
      }
      ul {
        overflow: hidden;
        margin-top: 28px;
        li {
          position: relative;
          float: left;
          width: 162px;
          height: 237px;
          margin-left: 20px;
          border: 1px solid #e6e6e6;
          box-sizing: border-box;
          .goA {
            display: block;
          }
          .hd {
            height: 160px;
            padding: 10px 0;
            box-sizing: border-box;
            text-align: center;
            img {
              max-width: 100%;
            }
          }
        }
        li:first-child {
          margin-left: 0;
        }
        li:hover {
          border-color: #4448f8;
          display: block;
        }
        li:before {
          position: absolute;
          content: "查看详情";
          width: 100%;
          line-height: 25px;
          left: 0;
          top: 0;
          color: #fff;
          background: red;
          text-align: center;
          background: rgba(68, 72, 248, 0.7);
        }
      }
    }
  }
}
.query_top {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 43px;
  > div {
    display: flex;
    &:nth-child(1),
    &:nth-child(2) {
      margin-right: 20px;
    }
    &:nth-child(2) {
      align-items: center;
      > div {
        &:nth-child(2) {
          width: 15px;
          background: #8f8a8a;
          border-radius: 10px;
          height: 2px;
          margin: 0 3px;
        }
      }
    }
    &:nth-child(3) {
      > button {
        height: 32px;
        cursor: pointer;
        font-size: 18px;
        border-radius: 2px;
        border: 0;
        color: #fff;
        margin-right: 20px;
        &:nth-child(1) {
          width: 78px;
          background: #e5e5e5;
          border: 1px solid rgb(77, 75, 75);
          color: #333;
        }
        &:nth-child(2) {
          width: 78px;
          background: #4449f8;
        }
        &:nth-child(3) {
          width: 110px;
          background: #4449f8;
        }
      }
    }
  }
}
.query_body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 25px;
}

.cipt288 {
  width: 228px;
  .el-input__inner {
    height: 32px;
  }
}
.cipt140 {
  width: 140px!important;
  .el-input__inner {
    height: 32px;
  }
}
.query_body_top {
  height: 50px;
  background: #eee;
}
.query_body_body {
  height: 50px;
  border-bottom: 2px solid #eeeeee;
  td {
    text-align: center;
  }
}
.invoice_popup {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  > div {
    &:nth-child(1) {
      width: 70%;
      border: 2px dashed red;
      font-size: 18px;
      color: #ff0000;
      padding: 20px;
      > p {
        margin: 10px 0;
        line-height: 25px;
      }
    }
    &:nth-child(2) {
      display: flex;
      font-size: 18px;
      color: #333;
      align-items: center;
      margin-top: 20px;
    }
    &:nth-child(3){
        width: 170px;
        height: 40px;
        background: #4448f8;
        border-radius: 5px;
        font-size: 18px;
        color: #fff;
        line-height: 40px;
        text-align: center;
        margin: 0 auto;
        margin-top: 25px;
        margin-bottom: 68px;
        cursor: pointer;
    }
  }
}
.block {
  width: 140px;
  /deep/.el-date-editor {
    width: 100%;
  }
  > span {
    margin-left: 23px;
  }
}
.solrt_ {
     width: 15px;
    background: #8f8a8a;
    border-radius: 10px;
    height: 2px;
    margin: 0 3px;
}
</style>